<template>
  <div v-loading="isLoading" class="list-table">
    <div id="d-scroll" class="infinite-list-wrapper infiniteActTask">
      <ul
        v-infinite-scroll="load"
        class="list"
        :infinite-scroll-disabled="disabled"
      >
        <li v-for="(item, index) in List" :key="index" class="list-item">
          <span class="border" style="display:none;" />
          <el-link type="primary" @click="openTask(item)">{{ item.title }}</el-link>
        </li>
      </ul>
      <p>{{ loadTit }}</p>
      <div v-if="emptyIcon" class="noneData">
        <div>
          <svg-icon icon-class="none" class-name="none-icon" />
          <p>{{ $t('暂无数据') }}</p>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="formOpen" :title="$t('任务详情')" custom-class="dialogForm pad20-act" :close-on-click-modal="false" :lock-scroll="false">
      <ProcessInfoForm ref="processInfoForm" />
    </el-dialog>

  </div>
</template>

<script>
import { applyList } from '@/api/act/process/actProcess'
import ProcessInfoForm from '../process/processInfoForm'
export default {
  components: {
    ProcessInfoForm
  },
  data() {
    return {
      isLoading: true,
      loading: false,
      emptyIcon: false,
      List: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      formOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 0,
        pageSize: 10,
        title: undefined,
        applyUserId: '',
        processName: undefined,
        status: undefined
      },
      wfMenuProcessData: {},
      // 表单参数
      form: {},
      total: '',
      loadTit: this.$t('加载中...')
    }
  },
  computed: {
    disabled() {
      return this.loading
    }
  },
  watch: {
    List: {
      handler(val) {
        if (val === [] || val.length === 0) {
          this.loading = true
        }
      },
      deep: true
    }
  },
  methods: {
    load() {
      this.queryParams.pageNum++
      this.getList(true)
    },
    /** 查询待办列表 */
    getList(flag) {
      this.emptyIcon = false
      this.loadTit = this.$t('加载中...')
      applyList(this.queryParams).then(response => {
        if (response.code === 200 && flag) {
          this.List = this.List.concat(response.rows)
          // 多次加载数据
          if (this.List.length >= response.total && response.total !== 0) {
             this.loadTit = this.$t('没有更多了')
             this.loading = true
          }
          if (response.total === 0) {
            this.loadTit = ''
            this.emptyIcon = true
            this.isLoading = false
            this.loading = false
          }
          this.isLoading = false
        } else {
          // 第一次加载
          this.List = response.rows
          this.total = response.total
          this.isLoading = false
        }
      })
    },
    // 取消按钮
    cancel() {
      this.formOpen = false
    },
    // 打开流程详情页面
    openTask(row) {
      this.formOpen = true
      this.$nextTick(() => {
        row.actId = row.id
        this.$refs.processInfoForm.init(row)
      })
    }
  }
}
</script>
